<template>
  <el-select
    ref="select"
    v-bind="$attrs"
    v-model="selectValue"
    class="role-employee-select"
    v-on="$listeners"
    popper-class="role_employee_select"
  >
    <div class="role-employee-select__body">
      <div class="mb-20 mt-10">
        <el-input
          prefix-icon="el-icon-search"
          placeholder="输入搜索内容"
          v-model="filterText"
        >
        </el-input>
      </div>
      <el-tree
        ref="tree"
        :data="showDepData"
        node-key="deptId"
        highlight-current
        default-expand-all
        :filter-node-method="filterNode"
        :check-strictly="true"
        @node-click="!multiple ? changeDepClick($event) : ''"
        @check="checkDepClick"
        :default-checked-keys="checkedKeys"
        :show-checkbox="multiple"
      >
        <flexbox
          slot-scope="{ node }"
          :class="{ 'is-current': node.isCurrent }"
          class="node-data"
        >
          <span class="node-data__mark" />
          <div class="node-data__label text-one-line">{{ node.label }}</div>
        </flexbox>
      </el-tree>
      <div class="hidden_option">
        <el-option
          v-for="item in groupList"
          :key="item.deptId"
          :label="item.name"
          :value="item.deptId"
          :disabled="true"
          style="padding: 0 10px; opacity: 0"
        />
      </div>
    </div>
  </el-select>
</template>

<script>
import { depListAPI } from "@/api/common"; // 获取部门接口
import { mapGetters } from "vuex";
export default {
  // 部门选择
  name: "UserDepartmentSelect",
  props: {
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
    value: [String, Object, Array],
    checkedKeys: {
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      filterText: "",
      showDepData: [],
      groupList: [
        {
          deptId: 1,
          name: "站位数据",
        },
      ],
      selectValue: "",
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // 数据更新回显
    value: {
      handler(val) {
        this.echoTree(val);
      },
      immediate: true,
    },
  },
  computed: {
    // 多选
    multiple: function () {
      return Object.keys(this.$attrs).includes("multiple");
    },
  },
  created() {
    this.getDepTreeList();
  },
  mounted() {
    this.echoTree(this.value);
  },
  methods: {
    /**
     * 获取部门列表-tree
     */
    getDepTreeList() {
      depListAPI({ type: "tree" })
        .then((res) => {
          this.showDepData = res.data || [];
        })
        .catch(() => {});
    },
    // 数据传递
    selectChange(data) {
      this.$emit("change", data);
      // 如果是多选 input事件
      // if (this.multiple) {
      //   this.$emit("input", data);
      // } else {
      //   this.$emit("change", data);
      // }
    },
    // 节点点击 部门
    changeDepClick(data) {
      this.$refs.select.blur();
      this.selectChange(data);
    },
    checkDepClick() {
      const data = this.$refs.tree.getCheckedNodes();
      this.selectChange(data);
    },
    // 树形 过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 回显操作
    echoTree(val) {
      // 是否是多选
      if (this.multiple) {
        let arr = [],
          valList = [],
          keyList = [];
        if (typeof val === "string" && val != "") {
          // 小概率 可能会是json数组
          valList = JSON.parse(val);
        } else if (typeof val === "object") {
          // 如果是对象 需确保保存的数据是数组
          valList = val;
        }
        // 循环数组，去取出label名称做回显
        valList.forEach((item) => {
          arr.push(item.label);
          keyList.push(item.deptId);
        });
        // 可能会取不到ref
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys(keyList);
        }
        this.selectValue = arr;
      } else {
        let valItem = val;
        // 单选 如果有回显值判断类型
        if (typeof val === "string" && val != "") {
          valItem = JSON.parse(val);
          this.selectValue = valItem.label;
        } else if (typeof val === "object") {
          this.selectValue = valItem.label;
        }
      }
    },
  },
};
</script>

<style lang="scss">
.el-tabs__header--hidden {
  .el-tabs__header {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
.role-employee-select {
  &__body {
    padding: 0 15px;
    width: 100%;
  }

  &__title {
    border-bottom: 1px solid #e4e7ed;
    padding: 0 0 7px;
    font-size: 12px;
    color: #909399;
    line-height: 30px;
  }

  .el-select-dropdown__item {
    padding: 0 10px;
  }
}

/deep/ .el-select-dropdown__item.selected::after {
  top: 0;
}

/deep/ .el-tabs {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }

  .el-tab-pane {
    height: 100%;
    overflow-y: auto;
  }

  .el-tabs__content {
    height: 200px;
  }
}

.search-input {
  margin-bottom: 5px;
  /deep/ .el-input__inner {
    background-color: #f4f4f4;
    border: none;
  }
}

.cell {
  width: calc(100% - 30px);
  &__img {
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  &__body {
    flex-shrink: 0;
    flex: 1;
    margin-right: 30px;
  }
  &__footer {
    text-align: right;
  }
}
/deep/ .el-tree-node__content {
  border-left: 2px solid transparent;
}
/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: #edf1fc;
  border-left: 2px solid #0066f9;
}
.role-employee-select__body {
  position: relative;
  .hidden_option {
    position: absolute;
    left: 0;
    top: 20px;
    z-index: -1000;
  }
}
</style>
<style lang="scss">
// 修改部门选择器下拉高度
.role_employee_select {
  .el-select-dropdown__wrap {
    max-height: 500px !important;
    .el-input__inner {
      border: none !important;
      background: #f6f7fc !important;
    }
  }
}
</style>